<template>
  <div id="tszcProject"/>
</template>

<script>

//自定义图片
export default {
  name: "tszcProject",
  data(){
    return {

      nameMap: '平凉市',

    }
  },
  mounted() {
    let h = document.body.clientHeight;
    document.getElementById("tszcProject").style.height = 30.66 + "vh";

    this.initDom();
  },
  methods: {

    /**
     * 地图初始化
     */
    initDom: function () {
      //基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('tszcProject'), 'light');
      let self = this;
      //点击后的企业放在这
      let deviceData = self.deviceData;
      //=======>>点击事件<<========
      myChart.on('click', function(e) {
        console.log(`点击了`,e)

      });

      //---------------------------
      /**
       * 取值
       */
      let toFixedNum=(val,mun)=>{
        return  (val/mun).toFixed(1)
      };


      const typeList = ['智慧安居', '全域无垃圾','智慧畜牧','河道电子围栏','智慧城管','智慧生态']; // 类型
      const valueList = [350, 150,123,344,23,77];
      let  mun= (350+150+123+344+23+77)/100;
      const percentLit = [
        toFixedNum(350,mun),
        toFixedNum(150,mun),
        toFixedNum(123,mun),
        toFixedNum(344,mun),
        toFixedNum(23,mun),
        toFixedNum(350,mun),
        toFixedNum(77,mun),
      ];
      const unit = "台"

      /* 数据处理 */
      let data = [];
      // 空格数据
      const sum = valueList.reduce((per, cur) => per + cur, 0);
      const gap = (1 * sum) / 100;
      const gapData = {
        name: '空格',
        value: gap,
        itemStyle: {
          color: 'transparent',
        },
      };
// 颜色系列
      const colorList = [
        //   {
        //   x: 0,
        //   y: 0,
        //   x2: 0,
        //   y2: 1,
        //   colorStops: [{
        //     offset: 0,
        //     color: 'rgba(0, 178, 255, 1)' // 0% 处的颜色
        //   }, {
        //     offset: 1,
        //     color: 'rgba(0, 114, 255, 1)' // 100% 处的颜色
        //   }],
        // },
        '#49C384',
        '#FFA13D',
        '#6D3DFF',
        '#2B8EF3',
        '#FF3B93',
        '#BEE5FB',
      ];
      // 循环添加数据
      for (let i = 0; i < typeList.length; i++) {
        data.push({
          name: typeList[i],
          value: valueList[i],
          itemStyle: {
            borderRadius: "50%",
            color: colorList[i]
          },
          label: {
            show: true,
            lineHeight: 32,
            padding: [54,-50,0,-50],
            formatter: (params) => {
              let index = typeList.indexOf(params.name)
              let num= `{value${index}|${valueList[index]}${unit}}\n`;
              let name= `{name${index}|${typeList[index]}}`;
              let percentage= `{percent${index}|${percentLit[index]}%}\n`;
              console.log(params)
              return percentage;
            },
            rich: {
              percent0: {
                fontSize: 16,
                fontFamily: "PangMenZhengDao",
                fontWeight: 400,
                color: "#00B2FF",
                align: "right",
                verticalAlign: "top"
              },
              percent1: {
                fontSize: 16,
                fontFamily: "PangMenZhengDao",
                fontWeight: 400,
                color: "#BA92FF",
                align: "left",
                verticalAlign: "top"
              },
              value0: {
                fontSize: 16,
                fontFamily: "PangMenZhengDao",
                fontWeight: 400,
                color: "#00B2FF",
                align: "right",
                verticalAlign: "top"
              },
              value1: {
                fontSize: 16,
                fontFamily: "PangMenZhengDao",
                fontWeight: 400,
                color: "#BA92FF",
                align: "left",
                verticalAlign: "top"
              },
              name0: {
                fontSize: 12,
                fontFamily: "Source Han Sans CN-Regular",
                fontWeight: 400,
                color: "#D1E5FF",
                align: "right",
                verticalAlign: "top"
              },
              name1: {
                fontSize: 12,
                fontFamily: "Source Han Sans CN-Regular",
                fontWeight: 400,
                color: "#D1E5FF",
                align: "left",
                verticalAlign: "top"
              }
            }
          },
          labelLine: {
            show: true,
            length: 18,
            length2: 90,
            lineStyle: {
              color: "rgba(66, 151, 255, 0.5)"
            }
          }
        });
        data.push(gapData)
      }
      let option = {
        backgroundColor: "#010c20",
        series: [{
          type: 'pie',
          radius: ['40%', '50%'],
          center: ["50%", "50%"],
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          data: data
        }]
      };


      //-------------------------------




      // 绘制图表
      myChart.setOption(option);
      //====>监听窗口变化 三种方式<====
      //自适应2
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    /**
     * 适配文字大小
     */
    fontSize(res){
      let docEl = document.documentElement,
          clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 100 * (clientWidth / 1440);
      return res*fontSize;
    },


  }
}


</script>

<style scoped>
#tszcProject {
  height: 100px;
  width: 100%;
}
</style>
